<template>
    <div class="login-bg">
        <div class="login-left">
            <div class="left-text">
                <!-- <h1>友约总后台管理系统</h1> -->
                <!-- <p>Shanghai Wenzheng background management system</p> -->
            </div>
            <el-tooltip
                class="item"
                effect="dark"
                content="打开/关闭背景视频"
                placement="bottom-end"
            >
                <div class="video-icon" @click="videoFlag = !videoFlag">
                    <i
                        class=""
                        :class="
                            !videoFlag
                                ? 'el-icon-picture'
                                : 'el-icon-video-camera'
                        "
                    ></i>
                </div>
            </el-tooltip>

            <video
                v-show="!videoFlag"
                class="animated fadeIn"
                preload
                muted
                autoplay
                loop
                src="https://wlxtypero.oss-cn-beijing.aliyuncs.com/img/video.mp4"
            ></video>
            <img
                v-show="videoFlag"
                class="animated fadeIn"
                src="@/assets/images/logn-bg33.jpg"
                alt="背景"
            />
        </div>
        <div class="login-container">
            <div class="login-box animated fadeInDown">
                <h1 v-show="isNext==1">友约总后台管理系统</h1>
                <div class="login-from" v-show="isNext==1">
                    <div class="item">
                        <svg-icon icon-class="user" />
                        <input
                            v-model="loginForm.username"
                            ref="username"
                            type="text"
                            ripple
                            placeholder="账号"
                        />
                    </div>
                    <div class="item">
                        <svg-icon icon-class="password" />
                        <input v-model="loginForm.password" ref="password" :type="passwordType" ripple placeholder="密码" />
                        <svg-icon @click="showPwd" class-name="eye-icon" :icon-class=" passwordType === 'password' ? 'eye' : 'eye-open' " />
                    </div>
                    <div class="btn-tab">
                        <el-checkbox v-model="isPwd">记住密码</el-checkbox>
                        <!-- <span @click="isNext = 2" class="vs-a-tab" >忘记密码？</span > -->
                    </div>
                    <button ripple class="flex-alc" @click="loginBtn">
                        <div class="icon" v-if="loading">
                            <i class="el-icon-loading"></i>
                        </div>
                        <span>登 录</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- <div class="power">
            技术支持：<a href="http://www.willmid.com" target="_blank"
                >上海闻峥</a
            >
        </div> -->
        <div class="power-logo">
            <!-- <a href="http://www.willmid.com" target="_blank"> -->
            <img
                src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/10/20/70fa0661b0048f8ac9feddfdb443dd1.png"
                alt="友约"
            />
            <!-- </a> -->
        </div>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import { setToken,removeToken } from "@/utils/auth";
import { menu } from '@/utils/menu'
export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
            },
            forget:{
                phone:'',
                code:'',
                password:'',
                one_pwd:'',
            },
            isNext:1,
            isPwd:false,
            loading: false,
            redirect: undefined,
            videoFlag: true,
            passwordType: "password",
            otherQuery: {},
        };
    },
    watch: {
        videoFlag(val) {
            localStorage.setItem("videoFlag", val);
        },
        isNext(val){
            if(val==1){
                this.forget = this.$options.data().forget;
            }else{

            }
        },
        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    this.redirect = query.redirect;
                    this.otherQuery = this.getOtherQuery(query);
                    console.log(454, this.redirect, this.otherQuery)
                }
            },
            immediate: true,
        },
    },
    created() {
        // window.addEventListener('storage', this.afterQRScan)
        let logoUser = localStorage.getItem("logoUser");
        if (logoUser) {
            let { username, password, isPwd } = JSON.parse(logoUser);
            this.isPwd = isPwd;
            isPwd ? (this.loginForm = { username, password }) : "";
        }
    },
    mounted() {
        if (this.loginForm.username === "") {
            this.$refs.username.focus();
        } else if (this.loginForm.password === "") {
            this.$refs.password.focus();
        }
    },
    methods: {
        ...mapMutations("user", ["SET_AVATAR", "SET_NAME", "setUserInfo"]),
        checkCapslock(e) {
            const { key } = e;
            this.capsTooltip =
                key && key.length === 1 && key >= "A" && key <= "Z";
        },
        showPwd() {
            if (this.passwordType === "password") {
                this.passwordType = "";
            } else {
                this.passwordType = "password";
            }
            this.$nextTick(() => {
                this.$refs.password.focus();
            });
        },
        async loginBtn() {
            let { username, password } = this.loginForm;
            if (!username || !password) {
                this.$message.error("用户名/密码不能为空");
                return false;
            }
            let ruleForm = Object.assign({}, this.loginForm);
            this.loading = true;
            let { code, data } = await this.$Http.login(ruleForm);
            this.loading = false;
            if (code) {
                if (this.isPwd) {
                    ruleForm.isPwd = true;
                    localStorage.setItem("logoUser", JSON.stringify(ruleForm));
                }
                localStorage.setItem("userInfo", JSON.stringify(data.user));
                setToken(data.user_token);
                this.setUserInfo(data.user);
                this.SET_AVATAR(data.user.avatar);
                this.SET_NAME(data.user.username);
                let res = await this.$Http.getUserMenu()
                if(res.code){
                    let arr = res.data.menu.find(v=>v.name=='admin');
                    if(arr){
                        sessionStorage.setItem('userId',data.user.id)
                        localStorage.setItem("menu", JSON.stringify(arr.child));
                        sessionStorage.setItem('uniqueKey', '/index/index_3_0') // 左侧菜单默认选中下标
                        // let list = menu(this.$router.asyncRoutes, arr.child);
                        // this.$router.addRoutes(list)
                        // this.$router.options.routes = [...this.$router.constantRoutes,...list];
                    }else {
                        removeToken()
                        return this.$message.error('您没有总后台权限')
                    }
                    localStorage.setItem('uniqueStair', '首页') // 父级
                    localStorage.setItem('uniqueSublevel', '首页') // 子级
                }
                console.log(this.$router.options.routes,'this.$router.options.routes');
                this.$router.push({ path:'/index/index'})
                setTimeout(() => {
                    this.$router.go(0)
                })
                // this.$message.success("登录成功!");
            }
        },
        //  忘记密码
        forgetPassword(){
            this.$confirm('忘记密码请联系管理员', '忘记密码', {
                confirmButtonText: '确定',
                showCancelButton:false,
                type: 'warning'
            })
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== "redirect") {
                    acc[cur] = query[cur];
                }
                return acc;
            }, {});
        },
    },
};
</script>

<style lang="scss" scoped>
$bg: #fff;
$dark_gray: #889aa4;
$light_gray: #eee;
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #f9f9fb inset !important;
}
$myColor: "#409EFF";

@mixin flex {
    display: flex;
}
@mixin flex-btn {
    @include flex();
    justify-content: space-between;
}
@mixin flex-alc {
    @include flex();
    align-items: center;
}
.flex {
    @include flex();
}
.flex-btn {
    @include flex-btn();
}
.flex-alc {
    @include flex-alc();
}
.w-100 {
    width: 100%;
}
.block {
    display: block;
}
.text-center {
    text-align: center;
}

.login-bg {
    @include flex-btn();
    @include flex-alc();
    overflow: hidden;
    height: 100%;
    width: 100%;
    .login-left {
        width: 60%;
        flex-shrink: 0;
        position: relative;
        height: 100%;
        .video-icon {
            position: absolute;
            right: 40px;
            top: 40px;
            cursor: pointer;
            i {
                font-size: 20px;
                color: #fff;
            }
        }
        video {
            width: 100vw;
            display: block;
            position: absolute;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            left: -40%;
        }
        img {
            height: 100%;
            object-fit: cover;
            display: block;
            width: 100vw;
            position: absolute;
            left: -40%;
            z-index: -2;
        }
        .left-text {
            position: absolute;
            top: 100px;
            left: 40px;
            z-index: 2;
            color: #fff;
        }
    }
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        background: #ffffff;
        height: 100vh;
        position: relative;
        box-shadow: 0px 8px 57.12px 10.88px rgba(0, 0, 0, 0.53);
        .login-box {
            width: 70%;
            h1 {
                color: #67656d;
                font-size: 40px;
                text-align: left;
                font-family: "Arial Hebrew Scholar";
                margin-bottom: 100px;
            }
            .login-from {
                min-width: 267px;
                .btn-tab{
                    // padding-top: 10px ;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }
                .item {
                    margin-bottom: 30px;
                    position: relative;
                    .svg-icon {
                        position: absolute;
                        z-index: 2;
                        top: 50%;
                        left: 15px;
                        transform: translateY(-50%);
                        color: #999999;
                        &.eye-icon {
                            cursor: pointer;
                            left: auto;
                            right: 40px;
                            position: absolute;
                        }
                    }

                    input {
                        height: 60px;
                        line-height: 50px;
                        padding: 10px 40px;
                        background: #f9f9fb;
                        //color: #999999;
                        border-radius: 10px;
                        width: 100%;
                        transition: 0.5s;
                        outline: none;
                        box-sizing: border-box;
                        border: 1px solid #f9f9fb;
                        &::-webkit-input-placeholder {
                            color: #dfdfde;
                        }
                        &:focus {
                            border-radius: 10px;
                            border: 1px solid #409eff;
                        }
                    }
                }
                button {
                    background: #5867de;
                    color: #ffffff;
                    line-height: 50px;
                    padding: 0 100px;
                    border-radius: 100px;
                    white-space: nowrap;
                    border: none;
                    margin: 0 auto;
                    cursor: pointer;
                    transition: 0.3s;
                    margin-top: 40px;
                    box-shadow: 0px 3px 10px 2px rgba(150, 162, 255, 0.52);
                    opacity: 0.8;
                    @keyframes rotate {
                        from {
                            transform: rotate(0deg);
                        }
                        to {
                            transform: rotate(359deg);
                        }
                    }
                    .icon {
                        // animation: rotate 1.5s linear infinite;
                        margin-right: 10px;
                    }
                    &:hover {
                        opacity: 1;
                        box-shadow: 0px 3px 10px 2px rgba(150, 162, 255, 0.52);
                    }
                }
            }
        }
    }
    .power {
        position: absolute;
        bottom: 30px;
        right: 20px;
        font-size: 14px;
        width: 40%;
        text-align: center;
        color: #999;
        a {
            color: #409eff;
        }
    }
    .power-logo {
        position: absolute;
        right: 20px;
        width: 150px;
        top: 30px;
        img {
            display: block;
            width: 100%;
        }
    }
}
</style>
